<template>
    <custom-page-box>
        <div class='need-manage-edit-container'>
            <div class='header'>
                <p>{{ formType === 'attractCapital' ? '引资' : '招商' }}需求</p>
                <a-button type="primary" @click='goBack' class="w90">返回</a-button>
            </div>
            <div class='steps-box'>
                <a-steps :current="allForm.currentStep">
                    <a-step title="需求信息" />
                    <a-step title="业主信息" />
                </a-steps>
            </div>
            <div class='steps1' v-show='allForm.currentStep === 0'>
                <attract-capital-form v-model='allForm' v-if="formType === 'attractCapital'" />
                <merchants-form v-model='allForm' v-else />
            </div>
            <div class='steps2' v-show='allForm.currentStep === 1'>
                <owner-info v-model='allForm' />
            </div>
        </div>
    </custom-page-box>
</template>

<script>
import AttractCapitalForm from '~/components/need-manage/investment-promotion/attract-capital-form'
import MerchantsForm from '~/components/need-manage/investment-promotion/merchants-form'
import OwnerInfo from '~/components/need-manage/investment-promotion/owner-info'

export default {
    // 招商引资表单
    name: 'NeedManageInvestmentPromotion',
    components: {
        AttractCapitalForm,
        MerchantsForm,
        OwnerInfo
    },
    data () {
        return {
            allForm: {
                currentStep: 0
            }
        }
    },
    computed: {
        formType () {
            return this.$route.query.formType || 'attractCapital'
        }
    },
    created () {
        if (this.$route.query.id) {
            this.getInfo()
        }
    },
    mounted () {

    },
    methods: {
        goBack () {
            this.$router.go(-1)
        },
        async getInfo () {
            const res = await this.$ApiServer['need/getInfo/attractCapitalMerchants']({
                id: this.$route.query.id
            })
            if (res.code === 200) {
                this.allForm = {
                    ...res.data,
                    type: res.data.multipleTypeList ? res.data.multipleTypeList.split(',').map(item => item.split('/')) : [],
                    governmentActualCapital: res.data.governmentActualCapital ? res.data.governmentActualCapital.split(',') : [],
                    actualCapitalPlan: res.data.actualCapitalPlan ? res.data.actualCapitalPlan.split(',') : [],
                    currentStep: 0,
                    cityInfo: {
                        address: res.data.address,
                        latitude: res.data.gis.split(',')[1],
                        longitude: res.data.gis.split(',')[0]
                    },
                    actualCapitalTitle: res.data.actualCapitalType === 1 ? '' : res.data.actualCapitalTitle,
                    governmentActualCapitalTitle: res.data.governmentActualCapitalType === 1 ? '' : res.data.governmentActualCapitalTitle,
                    targetIndustry: res.data.targetIndustry ? res.data.multipleIndustryList.split(',').map(item => item.split('/')) : [],
                    targetCity: res.data.targetCity ? res.data.targetCity.split(',') : [],
                    releaseState: undefined,
                    effectiveState: undefined,
                    videoList: {
                        videoUrl: res.data.videoUrl,
                        imgCoverUrl: res.data.imgCoverUrl
                    }
                }
                console.log(this.allForm)
            }
        }
    }
}
</script>

<style scoped lang='less'>
.need-manage-edit-container {
    height: 100%;
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        padding: 0 20px;
        border-bottom: 1px solid #F3F3F3;
        box-sizing: border-box;
        height: 50px;
        p {
            font-size: 16px;
            line-height: 50px;
            color: #2A2A2A;
        }
    }
    .steps-box {
        background: #fff;
        padding: 10px 0 25px 20px;
        display: flex;
        justify-content: center;
        & > * {
            width: 600px;
        }
      ::v-deep{
        .ant-steps-item-title{
          font-size: 14px;
        }
        .ant-steps-item-title::after{
           height: 0;
           border-bottom: 1px dashed #D4D4D4;
        }
        .ant-steps-item:first-child{
          .ant-steps-item-title::before{
            content:  '';
            width: 12px;
            height: 14px;
            background-color: transparent;
            background-image:  url('~@/assets/images/service-arrow.png');
            background-size: 12px 14px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(200px,-50%);
            z-index: 10;
          }
        }
        .ant-steps-item-icon{
          background-color: #E4E4E4;
          border: none;
          position: relative;
          .ant-steps-icon{
            font-size: 16px;
            font-weight: bold;
            color: #fff;
          }
          &:before{
            content: '';
            display: block;
            width: 22px;
            height: 22px;
            background-color: #999999;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
          }
        }

        .ant-steps-item-finish,.ant-steps-item-active{
          .ant-steps-item-icon{
            background-color: #DDF7E9;
            &:before{
              background-color: @primary-color;
            }
          }
        }
        .ant-steps-item.ant-steps-item-finish{
          .ant-steps-item-title:first-child {
            &:before{
              background-image:  url('~@/assets/images/service-arrow-active.png');
            }
          }
        }
      }
    }
    .steps1, .steps2 {
        background: #fff;
    }
}
.w90{
  width: 90px;
}
::v-deep .ant-upload-list-item{
  padding: 0;
}
</style>
